<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>OEE Style Tool v1.0.0.0</title>
	<style>
		.box {
			float: left;
			margin: 1px;
			min-width: 20px;
			height: 28px;
			border: 1px solid gray;
			font-size: 8px;
		}
	</style>
</head>

<body>


	<legend>Plain text, five column(value,R,G,B,A,label) with ',' separator</legend>
	<p><textarea id="intext" rows="20" cols="100">
245.15 , 102, 102, 102,255, -28 
250.15 , 228, 228, 228,255, -23 
251.15 , 119, 51 , 119,255, -22 
254.15 , 255, 153, 255,255, -19 
263.15 , 21 , 0  , 204,255, -10 
273.15 , 51 , 255, 255,255,   0 
274.15 , 0  , 119, 0  ,255,   1 
284.15 , 0  , 255, 0  ,255,  11 
285.15 , 255, 255, 51 ,255,  12 
299.15 , 255, 119, 0  ,255,  26 
311.15 , 136, 0  , 0  ,255,  38 
321.15 , 66 , 0  , 0  ,255,  48 
372.15 , 29 , 0  , 0  ,255,  99 
			</textarea></p>
	<p>
		<input id="make" type="submit" value="make json" onclick="onMake()" />
		<span id="error" style="color:red;"></span>
		<span id="succ" style="color:green;"></span>
	</p>

	<div>
		<table>
			<tr>
				<td>
					<p>Out Json Text <a id="downjson" download="style.json" href="#">download</a></p>
					<textarea id="outtext" rows="20" cols="80"></textarea>
				</td>
				<td>
					<p>Out qgis Text <a id="downqgis" download="style.txt" href="#">download</a></p>
					<textarea id="outtextqgis" rows="20" cols="80"></textarea>
				</td>
			</tr>
		</table>

	</div>

	<div>Out Colors:</div>
	<div style="float:left" id="outcolors">
		<!--<div class="box">111111</div>
		<div class="box">1</div>
			<div class="box" style="background-color: aqua;">1</div> -->
	</div>

	<script>
		function onMake() {
			let intext = document.getElementById("intext").value;
			intext = intext.trim();
			const lines = intext.split(/\r?\n/);
			document.getElementById("error").innerHTML = "";
			document.getElementById("succ").innerHTML = "";
			document.getElementById("outtext").value = "";
			document.getElementById("outtextqgis").value = "";
			document.getElementById("outcolors").innerHTML = "";

			document.getElementById('downjson').href = "#";
			document.getElementById('downqgis').href = "#";

			let outtext1 = "{\"type\":\"linear\",\n"
				+ "\"bands\":[0],\n"
				+ "\"nodatacolor\":{\"val\":0,\"r\":0,\"g\":0,\"b\":0,\"a\":0,\"lbl\":\"NoData\"},\n"
				+ "\"vranges\":[{\"minval\":0,\"maxval\":1000}],\n"
				+ "\"belowMinTransparent\":true,\n"
				+ "\"aboveMaxTransparent\":true,\n"
				+ "\"colors\":[\n";
			let outtext2 = "]}\n";

			let outcolorsHtml = "";
			let outtextqgis = "# for QGIS\n"
				+ "INTERPOLATION:INTERPOLATED\n";

			let hasError = false;
			for (let iline = 0; iline < lines.length; ++iline) {
				const f6 = lines[iline].trim().split(',');
				if (f6.length == 6) {
					const c1 = {};
					c1.val = Number(f6[0]);
					c1.r = Number(f6[1]);
					c1.g = Number(f6[2]);
					c1.b = Number(f6[3]);
					c1.a = Number(f6[4]);
					c1.lbl = f6[5];
					const c1text = JSON.stringify(c1);
					if (iline > 0) {
						outtext1 = outtext1 + "," + c1text + "\n";
					} else {
						outtext1 = outtext1 + " " + c1text + "\n";
					}
					outcolorsHtml += "<div class=\"box\" style=\"background-color:rgba(" +
						c1.r + "," +
						c1.g + "," +
						c1.b + "," +
						c1.a / 255.0 + ")\">" + c1.lbl + "</div>";

					outtextqgis += c1.val + "," + c1.r + "," + c1.g + "," + c1.b + "," + c1.a + "," + c1.lbl + "\n";
				} else {
					hasError = true;
					document.getElementById("error").innerHTML = "Error: line " + lines[iline] + " not 6 columns.";
					break;
				}
			}
			if (hasError == false) {

				document.getElementById("succ").innerHTML = "success";
				document.getElementById("outtext").value = outtext1 + outtext2;
				document.getElementById("outcolors").innerHTML = outcolorsHtml;
				document.getElementById("outtextqgis").value = outtextqgis;

				var dataqgis = new Blob([outtextqgis], { type: 'text/plain' });
				var urlqgis = window.URL.createObjectURL(dataqgis);
				document.getElementById('downqgis').href = urlqgis;

				var datajson = new Blob([outtext1 + outtext2], { type: 'text/json' });
				var urljson = window.URL.createObjectURL(datajson);
				document.getElementById('downjson').href = urljson;
			}



		}

		//document.getElementById("make")

	</script>

</body>

</html>